<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select class="province">
        <option value="">请选择省份</option>
        <!-- <option value="A001">北京</option>
        <option value="A002">上海</option>
        <option value="A003">湖北</option>
        <option value="A004">湖南</option> -->
    </select>
    <select class="city" name="" id="">
        <option value="">请选择市/区</option>
        <!-- <option value="A001">朝阳</option>
        <option value="A002">海淀</option>
        <option value="A003">沙河</option>
        <option value="A004">上地</option> -->
    </select>
</body>
<script>
    // 二级联动
    // (1) 请求pro.json数据  
    // (2) 根据省份集合动态生成option放到省份下拉框中
    // (3) 当省份下拉框切换时(onchange),获取对应的省份id,对应省份id从省份列表中取到指定省份数据(对象)
    // (4) 通过该省份的list属性 => 生成option放到city下拉框中

    // xhr.readyState  请求的状态
    //  0 1 2 3 4 

    // xhr.status  服务器响应的状态码
    // 100  200  300  400  500

    // request   response

    var proSel = document.getElementsByClassName("province")[0];
    var citySel = document.getElementsByClassName("city")[0];


    // 1. 请求数据
    var xhr = new XMLHttpRequest();
    // console.log(xhr.readyState); // 0

    xhr.open("get", "../data/pro.json", true);
    // console.log(xhr.readyState); // 1

    xhr.send();

    xhr.onreadystatechange = function () {
        // console.log(xhr.readyState); // 1
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            // console.log(result);

            // 2. 处理数据  => 将json字符串解析为js对象
            result = JSON.parse(result);
            console.log(result);


            // 3. 根据数据动态生成
            var { list: proList } = result;
            console.log(proList);

            var html = `<option value="">请选择省份</option>`;
            proList.forEach((item) => { //   {city_id: 'A001', city_name: '北京', list: Array(4)}
                var { city_id, city_name } = item;
                html += `<option value="${city_id}">${city_name}</option>`;
            })
            proSel.innerHTML = html;

            // 拓展: 函数的参数解构(如果确定函数的参数是数组和对象,可以对参数进行解构)
            var html = `<option value="">请选择省份</option>`;
            // proList.forEach(({ city_id, city_name } = item) => { // 对函数的参数结构
            //     html += `<option value="${city_id}">${city_name}</option>`;
            // })

            proList.forEach(({ city_id, city_name }) => { // 省略item
                return html += `<option value="${city_id}">${city_name}</option>`;
            })

            // proList.forEach(({ city_id, city_name }) => html += `<option value="${city_id}">${city_name}</option>`)
            proSel.innerHTML = html;



            proSel.onchange = function () {
                var cityId = this.value; // cityId => 下拉框取值
                console.log(cityId);

                if (cityId) { // 如果选择了 省份/直辖市/自治区

                    var thisPro = proList.find((item) => {
                        let { city_id } = item;
                        return city_id === cityId
                    })
                    console.log(thisPro);

                    if(thisPro){
                        var {list:cityList} = thisPro;

                        var html = `<option value="">请选择市/区</option>`;
                        cityList.forEach((item) => {
                            var { city_id, city_name } = item;
                            html += `<option value="${city_id}">${city_name}</option>`;
                        })
                        citySel.innerHTML = html;
                    }
                }else{ // 没有选择省份/直辖市/自治区  => 选择了"请选择省份"=> option
                citySel.innerHTML = `<option value="">请选择市/区</option>`;
                }
            }


        }
    }








</script>

</html>